import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:pet/app/websocket_controller.dart';

import '../../../contants/my_colors.dart';
import '../../../widgets/logo.dart';
import '../../../widgets/welcome.dart';
import '../controllers/login_controller.dart';

class LoginView extends GetView<LoginController> {
  const LoginView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              GetBuilder<WebsocketController>(
                  autoRemove: false,
                  builder: (controller) {
                    return !controller.isConnect
                        ? Center(
                            child: Container(
                              padding: const EdgeInsets.only(
                                top: 4,
                                bottom: 4,
                              ),
                              width: Get.width,
                              decoration: const BoxDecoration(
                                color: Colors.grey,
                              ),
                              child: const Center(
                                child: Text(
                                  '当前无法连接网络，可检查网络设置是否正常',
                                  style: TextStyle(color: Colors.orange),
                                ),
                              ),
                            ),
                          )
                        : Container();
                  }),
              const SizedBox(
                height: 30,
              ),
              // logo
              const Logo(),
              const SizedBox(
                height: 30,
              ),
              Welcome(first: "欢迎使用 ", second: "宠宝客服"),
              const SizedBox(
                height: 30,
              ),
              const LoginForm(),
            ],
          ),
        ),
      ),
    );
  }
}

class LoginForm extends GetView<LoginController> {
  const LoginForm({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    FocusNode focusNodeName = FocusNode();
    FocusNode focusNodePassword = FocusNode();
    FocusScopeNode? focusScopeNode;

    final GlobalKey<FormState> formKey = GlobalKey<FormState>();
    LoginController controller = Get.find<LoginController>();
    return Padding(
      padding: const EdgeInsets.only(left: 30, right: 30),
      child: Form(
        key: formKey,
        child: Column(
          children: [
            TextFormField(
              style: const TextStyle(
                textBaseline: TextBaseline.alphabetic,
              ),
              // autofocus: true,
              focusNode: focusNodeName,
              cursorColor: Colors.grey, // 光标颜色
              cursorHeight: 18, // 光标高度
              cursorWidth: 1.5, // 光标宽度
              decoration: const InputDecoration(
                contentPadding: EdgeInsets.only(top: 0, bottom: 2),
                enabledBorder: UnderlineInputBorder(
                  // 底边样式
                  borderSide: BorderSide(
                    color: Colors.grey,
                    width: 0.5,
                  ),
                ),
                focusedBorder: UnderlineInputBorder(
                  // 聚焦情况下的底边样式
                  borderSide: BorderSide(
                    color: Colors.grey,
                    width: 0.7,
                  ),
                ),
                hintStyle: TextStyle(
                  color: Colors.grey,
                  height: 4,
                ),
                hintText: '请输入用户名',
              ),
              // autovalidateMode: AutovalidateMode.disabled,
              onSaved: (value) {
                print('$value');
              },
              validator: (String? value) {
                return value!.length >= 6 ? null : '账号最少6个字符';
              },
              onChanged: (value) {
                controller.setUsername(value);
              },
              onFieldSubmitted: ((value) {
                controller.setUsername(value);
                focusScopeNode ??= FocusScope.of(context);
                focusScopeNode?.requestFocus(focusNodePassword);
              }),
            ),
            const SizedBox(
              height: 20,
            ),
            Obx(() {
              return TextFormField(
                obscureText: controller.hidden.value,
                style: const TextStyle(
                  textBaseline: TextBaseline.alphabetic,
                ),
                focusNode: focusNodePassword,
                cursorColor: Colors.grey, // 光标颜色
                cursorHeight: 18, // 光标高度
                cursorWidth: 1.5, // 光标宽度
                decoration: InputDecoration(
                  prefixIconConstraints: const BoxConstraints(
                    maxWidth: 40, // eye icon width
                    maxHeight: 28,
                  ),
                  // contentPadding:const EdgeInsets.only(top: 4, bottom: 0, left: 0),
                  prefixIcon: IconButton(
                    onPressed: () {
                      controller.changeStatusPassword();
                    },
                    icon: const Icon(
                      Icons.remove_red_eye_outlined,
                      size: 20,
                      color: Colors.grey,
                    ),
                  ),
                  suffixIconConstraints: const BoxConstraints(
                    maxWidth: 90,
                    maxHeight: 16, // eye icon width
                  ),
                  suffixIcon: GestureDetector(
                    onTap: () {
                      Get.snackbar('提示', '忘记密码可通过PC端修改');
                    },
                    child: const Text(
                      "忘记密码?",
                      style: TextStyle(
                        color: Colors.grey,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  enabledBorder: const UnderlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.grey,
                      width: 0.7,
                    ),
                  ),
                  focusedBorder: const UnderlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.grey,
                      width: 0.7,
                    ),
                  ),
                  hintStyle: const TextStyle(
                    color: Colors.grey,
                    height: 2,
                  ),
                  hintText: '请输入账号密码',
                ),
                // autovalidateMode: AutovalidateMode.disabled,
                onSaved: (value) {},
                validator: (String? value) {
                  return value!.length >= 6 ? null : '密码最少6个字符';
                },
                onChanged: (value) {
                  controller.setPassword(value);
                },
                onFieldSubmitted: ((value) {
                  controller.setPassword(value);
                  focusScopeNode ??= FocusScope.of(context);
                  focusScopeNode?.requestFocus(focusNodePassword);
                  focusScopeNode?.nextFocus();
                }),
              );
            }),
            const SizedBox(
              height: 30,
            ),
            GestureDetector(
              onTap: () {
                if (formKey.currentState!.validate()) {
                  controller.login();
                }
              },
              child: Container(
                alignment: Alignment.center,
                height: 50,
                width: 200,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(25),
                  color: MyColors.MainColor,
                ),
                child: GetBuilder<WebsocketController>(
                  builder: (controller) {
                    return Text(
                      controller.logining ? '登录中' : '登录',
                      style: const TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
